<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>UN Org Tree</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html,
            body {
                width: 100%;
                height: 100%;
            }
            body {
                width: 960px;
                margin: 0 auto;
            }
            #un-tree--wrapper,
            #un-tree--wrapper2 {
                margin: 60px auto 0;
                width: 100%;
                overflow: auto;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2>初始化参数类型: Json Array</h2>
        <div id="un-tree--wrapper"></div>
        <h2>初始化参数类型: JsonTree</h2>
        <div id="un-tree--wrapper2"></div>
    <script type="text/javascript" src="./dist/un-tree.min-sourcemap.js"></script></body>
    <!-- <script src="./un-tree.min-sourcemap.js" type="text/javascript" charset="utf-8"></script> -->
    <script>
        let listData = [
            {
                id: "99d78438-1f14-4552-ba77-039bff75e4bc",
                text: "公司董事会1111",
                parent: "root",
            },
            {
                id: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
                text: "总经理",
                parent: "99d78438-1f14-4552-ba77-039bff75e4bc",
            },
            {
                id: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f",
                text: "副总经理1",
                parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
            },
            {
                id: "b05991b4-8944-4dd8-92c4-ffd7848e7112",
                text: "副总经理2",
                parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
            },
            {
                id: "f135c05b-ffde-4d82-895f-a6daf052c178",
                text: "副总经理3",
                parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
            },
            {
                id: "234e9d2e-676b-4601-9820-e9b064761ff4",
                text: "技术总监",
                parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
            },
            {
                id: "7937421a-ee31-4988-934d-7e6469f0f37f",
                text: "数据中心",
                parent: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f",
            },
            {
                id: "11c1b052-89f8-4873-a876-6de6130385e5",
                text: "测量中心",
                parent: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f",
            },
            {
                id: "e9c44ca7-5302-4ae7-836a-2adc93e0f5d4",
                text: "财务部",
                parent: "b05991b4-8944-4dd8-92c4-ffd7848e7112",
            },
            {
                id: "e9c44ca7-5302-4ae7-836a-2adc93e0f5d4",
                text: "办公室",
                parent: "b05991b4-8944-4dd8-92c4-ffd7848e7112",
            },
            {
                id: "bc407b45-56ef-4bdc-ab31-325d4cad5243",
                text: "项目部",
                parent: "f135c05b-ffde-4d82-895f-a6daf052c178",
            },
            {
                id: "71fc1ee3-5f31-49a8-8cdc-086c92bff785",
                text: "评估一部",
                parent: "f135c05b-ffde-4d82-895f-a6daf052c178",
            },
            {
                id: "9a0214ba-4afc-43ce-9851-fbc79dd48f25",
                text: "技术部",
                parent: "234e9d2e-676b-4601-9820-e9b064761ff4",
            },
            {
                id: "71fc1ee3-5f31-49a8-8cdc-086c92bff785",
                text: "评估二部",
                parent: "234e9d2e-676b-4601-9820-e9b064761ff4",
            },
        ];

        function handleClick(itemId, itemData, itemNode) {
            console.log("数据id:",itemId);
            console.log("该项对应数据对象:", itemData);
            console.log("当前DOM节点:", itemNode);
        }
        let el = document.getElementById("un-tree--wrapper");
        let tree = new UNTree({
            el: el,
            jsonArr: listData,
            parentld: "root",
            type: "list",
            viewClass: "view-demo",
            itemClass: "item-demo",
            click: handleClick,
        });
        tree.render();

        let treeData = [
            {
                id: "99d78438-1f14-4552-ba77-039bff75e4bc",
                text: "公司董事会222",
                parent: "root",
                children: [
                    {
                        id: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
                        text: "总经理",
                        parent: "99d78438-1f14-4552-ba77-039bff75e4bc",
                        children: [
                            {
                                id: "18c9f830-e699-4fe1-b79c-71a6b34b7e8f",
                                text: "副总经理1",
                                parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
                                children: [
                                    {
                                        id:
                                            "7937421a-ee31-4988-934d-7e6469f0f37f",
                                        text: "数据中心",
                                        parent:
                                            "18c9f830-e699-4fe1-b79c-71a6b34b7e8f",
                                    },
                                    {
                                        id:
                                            "11c1b052-89f8-4873-a876-6de6130385e5",
                                        text: "测量中心",
                                        parent:
                                            "18c9f830-e699-4fe1-b79c-71a6b34b7e8f",
                                    },
                                ],
                            },
                            {
                                id: "b05991b4-8944-4dd8-92c4-ffd7848e7112",
                                text: "副总经理2",
                                parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
                                children: [
                                    {
                                        id:
                                            "e9c44ca7-5302-4ae7-836a-2adc93e0f5d4",
                                        text: "财务部",
                                        parent:
                                            "b05991b4-8944-4dd8-92c4-ffd7848e7112",
                                    },
                                    {
                                        id:
                                            "e9c44ca7-5302-4ae7-836a-2adc93e0f5d4",
                                        text: "办公室",
                                        parent:
                                            "b05991b4-8944-4dd8-92c4-ffd7848e7112",
                                    },
                                ],
                            },
                            {
                                id: "f135c05b-ffde-4d82-895f-a6daf052c178",
                                text: "副总经理3",
                                parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
                                children: [
                                    {
                                        id:
                                            "bc407b45-56ef-4bdc-ab31-325d4cad5243",
                                        text: "项目部",
                                        parent:
                                            "f135c05b-ffde-4d82-895f-a6daf052c178",
                                    },
                                    {
                                        id:
                                            "71fc1ee3-5f31-49a8-8cdc-086c92bff785",
                                        text: "评估一部",
                                        parent:
                                            "f135c05b-ffde-4d82-895f-a6daf052c178",
                                    },
                                ],
                            },
                            {
                                id: "234e9d2e-676b-4601-9820-e9b064761ff4",
                                text: "技术总监",
                                parent: "d2eb4680-4cee-4549-8a0f-171fd9888f4b",
                                children: [
                                    {
                                        id:
                                            "9a0214ba-4afc-43ce-9851-fbc79dd48f25",
                                        text: "技术部",
                                        parent:
                                            "234e9d2e-676b-4601-9820-e9b064761ff4",
                                    },
                                    {
                                        id:
                                            "71fc1ee3-5f31-49a8-8cdc-086c92bff785",
                                        text: "评估二部",
                                        parent:
                                            "234e9d2e-676b-4601-9820-e9b064761ff4",
                                    },
                                ],
                            },
                        ],
                    },
                ],
            },
        ];

        let el2 = document.getElementById("un-tree--wrapper2");
        let tree2 = new UNTree({
            el: el2,
            jsonArr: treeData,
            parentld: "root",
            type: "tree",
            viewClass: "view-demo",
            itemClass: "item-demo",
            click: handleClick,
        });
        tree2.render();
    </script>
</html>
